<template>
    <div class="jianzhuForm">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="帐号名称" prop="acName">
                        <el-input v-model="form.acName" max="50"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账户类型" prop="acType">
                        <el-select v-model="form.acType" placeholder="请选择" style="width: 100%">
                            <el-option
                                v-for="item in acTypeList"
                                :label="item.DIC_DESC"
                                :value="item.DIC_VALUE"
                                v-bind:key="item.DIC_GUID"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="登录用户" prop="user">
                        <!-- 1新增 0系统用户 -->
                        <el-radio v-model="form.user" label="1" disabled>新建用户</el-radio>
                        <el-radio v-model="form.user" label="0" disabled>选择系统用户</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账户初始化时间" prop="initTime">
                        <!-- <el-input type="number" v-model="form.initTime"></el-input> -->
                        <el-date-picker
                            v-model="form.initTime"
                            type="date"
                            placeholder="选择日期"
                            style="width: 337px; margin-right: 10px"
                            disabled
                        >
                        </el-date-picker>
                        <el-checkbox v-model="checked" @change="changeCheck">实时</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.user == '1'">
                <el-col :span="12">
                    <el-form-item label="登录名" prop="acLoginName">
                        <el-input v-model="form.acLoginName"></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="登录密码" prop="acPassword">
                        <el-input type="password" v-model="form.acPassword"></el-input>
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-row v-if="form.user == '0'">
                <el-col :span="12">
                    <el-form-item label="登录名" prop="acLoginName">
                        <el-select v-model="form.acLoginName" placeholder="请选择" style="width: 100%" @change="changeUser">
                            <el-option
                                v-for="item in userList"
                                :label="item.tempName"
                                :value="item.user_id"
                                v-bind:key="item.user_guid"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="登录密码" prop="acPassword">
                        <el-input type="password" v-model="form.acPassword" disabled></el-input>
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="acuser_name">
                        <el-input v-model="form.acuser_name" maxlength="30"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="acPhone">
                        <el-input type="number" v-model="form.acPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="acEmail">
                        <el-input type="text" v-model="form.acEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="acIdCard">
                        <el-input type="text" v-model="form.acIdCard"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="使用人数" prop="acPersonCount">
                        <el-input type="number" v-model="form.acPersonCount"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="使用面积" prop="acArea">
                        <el-input type="number" v-model="form.acArea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="透支金额" prop="acOver">
                        <el-input type="number" v-model="form.acOver" placeholder="请输入">
                            <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">元</i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="告警金额" prop="acAlarm">
                        <el-input type="number" v-model="form.acAlarm" placeholder="请输入">
                            <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">元</i>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="公共账户" prop="isPublic">
                        <el-radio v-model="form.isPublic" label="0">否</el-radio>
                        <el-radio v-model="form.isPublic" label="1">是</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="费用分摊" prop="acShare">
                        <!-- <el-select v-model="form.acShare" placeholder="请选择" style="width: 100%">
                                    <el-option label="费用分摊" value="shanghai"></el-option>
                                    <el-option label="费用分摊2" value="beijing"></el-option>
                                </el-select> -->
                        <el-input type="text" v-model="form.acShare"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="账户描述" prop="acDesc">
                        <el-input type="textarea" v-model="form.acDesc"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import moment from 'moment'
export default {
    components: {},
    props: ['userInfo'],
    watch: {
        userInfo: {
            handler(user) {
                this.userInfoList = user ?? []
                this.getUserInfo()
            },
            immediate: true
        }
    },
    data() {
        return {
            checked: true,
            activeName: 'first',
            ybList: [],
            step: 1,
            rules: {
                acName: [{required: true, message: '账户名称不能为空', trigger: ['blur', 'change']}],
                acType: [{required: true, message: '请选择账户类型', trigger: ['blur', 'change']}],
                acLoginName: [{required: true, message: '请选择填写或选择登录名', trigger: ['blur', 'change']}],
                acuser_name: [{required: true, message: '请填写姓名', trigger: ['blur', 'change']}],
                acPhone: [
                    {required: true, message: '请填写联系电话', trigger: ['blur', 'change']},
                    {pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号码', trigger: 'blur'}
                ],
                acIdCard: [
                    {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: ['blur', 'change']}
                ],
                acEmail: [
                    {required: true, message: '请填写邮箱', trigger: ['blur', 'change']},
                    {
                        pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
                        message: '请输入正确的邮箱',
                        trigger: ['blur', 'change']
                    }
                ],
                acPassword: [
                    {
                        pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).+$/,
                        message: '密码需包含数字、字母及至少一个特殊字符(!@#$%^&*)',
                        trigger: ['blur', 'change']
                    }
                ],
                acOver: [{required: true, message: '请填写透支金额', trigger: ['blur', 'change']}]
            },
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: [],
            acTypeList: [],
            form: {
                acType: '',
                user: '1',
                initTime: moment().format('YYYY-MM-DD'),
                acLoginName: '',
                acPassword: '',
                acuser_name: '',
                acPhone: '',
                acEmail: '',
                acIdCard: '',
                acPersonCount: '',
                acArea: '',
                acOver: '',
                acAlarm: '',
                isPublic: '',
                acShare: '',
                acDesc: '',
                acName: '',
                ac_guid: ''
                // eqguids: ''
            },
            userList: [],
            userInfoList: []
        }
    },
    computed: {},
    created() {
        this.getAcType()
        this.getLoginName()
    },
    mounted() {
        this.$nextTick(() => {})
    },
    methods: {
        changeCheck(e) {
            if (e) {
                this.form.initTime = moment().format('YYYY-MM-DD')
            } else {
                this.form.initTime = null
            }
        },
        changeUser(e) {
            const item = this.userList.find((t) => t.user_id == e)
            // 登录名 user_id
            // 姓名 user_name
            // 联系电话 user_m_tel
            // 邮箱 user_email
            // 身份证号
            this.form.acLoginName = item.user_id
            this.form.acuser_name = item.user_name
            this.form.acPhone = item.user_m_tel
            this.form.acEmail = item.user_email
        },
        getLoginName() {
            let self = this
            let params = `/api/User/GetUsersByOrg?PageSize=1000&PageIndex=1`
            AjaxCommon(params, 'get', null).then((res) => {
                console.log(res, 'res...........')
                if (res?.data?.Code == 200) {
                    const data = res?.data.Message
                    let row = data?.rows ?? []
                    row?.map((t) => {
                        // 登录名 +姓名+联系电话+邮箱
                        t.tempName = t.user_id + '-' + t.user_name + '-' + t.user_m_tel + '-' + t.user_email
                        return t
                    })
                    self.userList = data?.rows
                } else {
                    PopupCommon.notify('error', res?.data?.msg)
                }
            })
        },
        getAcType() {
            AjaxCommon(`/api/OpenAccount/GetAcType`, 'get', null).then((res) => {
                // DIC_DESC DIC_VALUE DIC_GUID
                const data = res.data.Message
                this.acTypeList = data ?? []
            })
        },
        async getUserInfo() {
            const userId = this.userInfoList[0].AC_GUID
            const res = await AjaxCommon(`/api/OpenAccount/GetAccountById?ac_guid=${userId}`, 'get', null)
            const data = res.data.Message?.[0] ?? {}
            setTimeout(() => {
                this.form = {
                    acType: data?.AC_TYPE,
                    acLoginName: data?.USER_ID,
                    user: data?.AC_EQ_TYPE,
                    initTime: moment(data?.INIT_TIME).format('YYYY-MM-DD'),
                    // acPassword: data?.USER_ID,
                    acName: data?.AC_NAME,
                    acuser_name: data?.USER_NAME,
                    acPhone: data?.phone,
                    acEmail: data?.USER_EMAIL,
                    acIdCard: data?.ID_CARD,
                    acPersonCount: data?.PERSON_COUNT,
                    acArea: data?.AREA,
                    acOver: data?.OVER_SUM,
                    acAlarm: data?.ALARM_SUM,
                    isPublic: data?.IS_PUBLIC,
                    acShare: data?.SHARE_TYPE,
                    acDesc: data?.AC_DESC,
                    ac_guid: userId
                    // eqguids: data?.USER_ID,
                }
            }, 500)
        },
        onDelete() {
            this.ybList.splice(this.ybList.length - 1, 1)
        },
        cancel() {
            this.$emit('close', '')
        },
        onSubmit() {
            let that = this
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // that.form.initTime = that.checked ? 'RT' : moment().format('YYYY-MM-DD HH:mm:ss')
                    AjaxCommon('/api/OpenAccount/EditAccount', 'post', that.form).then((res) => {
                        if (res?.data?.Code == 200) {
                            PopupCommon.notify('sucess', '编辑成功')
                            that.$emit('sucess', '')
                        } else {
                            let data = res?.data?.Message ?? '编辑失败'
                            PopupCommon.notify('fail', data)
                        }
                    })
                } else {
                    PopupCommon.notify('info', '请将帐号信息填写完整')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.ybList {
    .ybContent {
        height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        .ybNum {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            padding: 5px 0 10px 11px;
            margin-bottom: 10px;
        }
    }
    .btnSave {
        text-align: right;
    }
}
.addDiv {
    font-size: 16px;
    background-color: #f9fafc;
    height: 45px;
    line-height: 45px;
    margin-bottom: 20px;
    margin-left: 5px;
    border-radius: 2px;
    padding: 0 18px;
    text-align: right;
    display: flex;
    span {
        font-size: 16px;
        width: 150px;
        text-align: left;
        color: #777;
        label {
            font-size: 16px;
            color: #333;
        }
    }
    .customBtns {
        text-align: right;
        flex: 1;
    }
}
.titleImg {
    margin-bottom: 10px;
}
.jianzhuForm {
    position: relative;
    top: -15px;
}
</style>
